<template>
    <div class="dai_payment">
        <div class="order_msg">
            <span class="number f26">订单号：{{item.orderNo}}</span>
            <span class="state f26">{{item.status}} 
                <i class="icon iconfont icon-changyonggoupiaorenshanchu" v-if="item.status == '已完成' | item.status == '已取消'"></i>
            </span>
        </div>
        <dl class="pay_msg">
            <dt>
                <img :src="item.masterPhoto | hasdomain">
            </dt>
            <dd>
                <p><span class="type f26">{{item.questions}}</span><span class="price f26">￥{{item.totalPrice? item.totalPrice : item.totalMoney}}</span></p>
                <h3 class="master f30">{{item.masterName ? item.masterName : item.userName}}</h3>
                <time class="time f24">{{item.createtime}}</time>
            </dd>
        </dl>
        <div class="operate">
            <button class="btn_on f28" v-if="item.status == '待付款' && !$store.state.isMaster" @click="payment(item.serviceorderId, item.couponUserId)">立即支付</button>
            <!-- <button class="f28" v-if="item.status == '未确认' && $store.state.isMaster">确认接单</button> -->
            <!-- <button class="f28" v-if="item.status == '未确认' && $store.state.isMaster">拒绝接单</button> -->
            <button class="f28" v-if="item.status == '进行中' | item.status == '已完成'" @click="xiangqing(item)">查看详情</button>
            <button class="f28" v-if="item.status == '待付款' && !$store.state.isMaster" @click="getOrderId(item.serviceorderId)">取消订单</button>
            <button class="f28" v-if="item.status == '待评价'" @click="appraise(item.consultanceid, 1)">立即评价</button>
            <!-- <button class="f28" v-if="item.status == '已取消'">再来一单</button> -->
            <!-- v-if="item.status == '待回复' | item.status == '已完成' | item.status == '进行中' | item.status == '待评价'"  -->
            <button class="f28" v-if="item.status == '待退款'" @click="refund(item)">退款操作</button>
        </div>
    </div>
</template>

<script>
    import Bus from '../bus/bus.js'
    export default {
        name: 'daiPayment',
        props: {
            item: Object,
        },
        data() {
            return {
                orderId: ''
            }
        },
        methods: {
            xiangqing(item) {
                console.log(item)
                let val = item.consultanceid
                if(this.$store.state.isMaster){
                    this.$router.push({
                        path: '/masterAdvisory',
                        query: {
                            ding: val,
                            status: item.status
                        }
                    })
                } else {
                    this.$router.push({
                        path: '/userAdvisory',
                        query: {
                            ding: val,
                            status: item.status
                        }
                    })
                }
            },
            getOrderId(id) {
                this.orderId = id
                Bus.$emit('delOrder', {id: id, bool: true, type: 1}) // type: 1取消订单  2删除订单
            },
            payment(id, cId) {
                this.$router.push({
                    path: '/pay',
                    query: {
                        step: 1,
                        id: id,
                        couponUserId: cId
                    }
                })
            },
            appraise(dId, pj) {
                this.$router.push({
                    path: '/userAdvisory',
                    query: {
                        ding: dId,
                        pj: pj
                    }
                })
            },
            refund(item) {
                this.$router.push({
                    path: '/refund',
                    query: {
                        oId: item.orderNo,
                        que: item.questions,
                        price: item.totalPrice,
                        rea: item.tui_reason,
                        un: item.userName,
                        ding: item.consultanceid
                    }
                })
            }
        },
        mounted() {
            
        }
    }
</script>

<style lang='less' scoped>
    .dai_payment{
        .padd(0, 20);
        background: #fff;
        .mb(20);
        .order_msg{
            .lh(64);
            display: flex;
            justify-content: space-between;
            .state{
                color: #666;
            }
        }
        .pay_msg{
            display: flex;
            border-bottom: 1px solid #f2f2f2;
            .pb(10);
            dt{
                .w(160);
                .h(160);
                overflow: hidden;
                img{
                    width: 100%;
                    height: auto;
                }
            }
            dd{
                flex: 1;
                .pl(20);
                box-sizing: border-box;
                p{
                    display: flex;
                    justify-content: space-between;
                    .lh(60);
                    .price{
                        color: #E73828;
                    }
                }
                h3{
                    .lh(50);
                    font-weight: normal;
                }
                .time{
                    .lh(60);
                }
            }
        }
        .operate{
            .h(88);
            .lh(88);
            text-align: right;
            button{
                .ml(20);
                border: none;
                background: #fff;
                border: 1px solid #666;
                .h(56);
                // .w(160);
                border-radius: 5px;
                color: #666;
                display: inline-block;
                &:nth-child(1){
                    color: @primary;
                    border-color: @primary;
                }
                &:focus{
                    outline:0;
                } 
            }
            .btn_on{
                color: @primary;
                border-color: @primary;
            }
        }
    }
</style>
